<template> 
  <div class="app-container">

    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>昨日未打卡人员统计</span>
    </el-card>

    <div class="overview-layout">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">结缘2023期昨日总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{ clockNum }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{ applyNum }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{ unClockNum }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{ allCount }}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">打卡人数</el-col>
                <el-col :span="6" class="overview-item-title">请假人数</el-col>
                <el-col :span="6" class="overview-item-title">未打卡未请假</el-col>
                <el-col :span="6" class="overview-item-title">总人数</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">西天群昨日总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{ xiTianClockNum }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{ xiTianApplyNum }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{ xiTiaNunClockNum }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{ xiTianAllCount }}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">打卡人数</el-col>
                <el-col :span="6" class="overview-item-title">请假人数</el-col>
                <el-col :span="6" class="overview-item-title">未打卡未请假</el-col>
                <el-col :span="6" class="overview-item-title">总人数</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
 
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>查询昨天未打卡未请假用户列表</span>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>结缘2023期-用户名称列表</span>
    </el-card>
    <div class="table-container">
      <el-table ref="adminTable"
                :data="list"
                style="text-align: center;"
                v-loading="listLoading" border>
        <el-table-column label="用户名称" align="center">
          <template slot-scope="scope">{{scope.row}}</template>
        </el-table-column>
      </el-table>
    </div>

    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>西天群-用户名称列表</span>
    </el-card>
    <div class="table-container">
      <el-table ref="xiTianTable"
                :data="xitianList"
                style="text-align: center;"
                v-loading="listLoading" border>
        <el-table-column label="用户名称" align="center">
          <template slot-scope="scope">{{scope.row}}</template>
        </el-table-column>
      </el-table>
    </div>



    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>查询本月份旷卡列表用户(ps:次数大于等于2次)</span>
      </div>
    </el-card>


    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>结缘群-旷卡用户名称列表</span>
    </el-card>
    <div class="table-container">
      <el-table ref="affectionTable"
                :data="affectionList"
                style="text-align: center;"
                v-loading="listLoading" border>

        <el-table-column label="用户名称" align="center">
          <template slot-scope="scope">{{scope.row.name }}</template>
        </el-table-column>

        <el-table-column label="旷卡次数" align="center">
          <template slot-scope="scope">{{scope.row.unClockNum}}</template>
        </el-table-column>

      </el-table>
    </div>


    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>西天群-旷卡用户名称列表</span>
    </el-card>
    <div class="table-container">
      <el-table ref="westenNoCardTable"
                :data="westenNoCardList"
                style="text-align: center;"
                v-loading="listLoading" border>

        <el-table-column label="用户名称" align="center">
          <template slot-scope="scope">{{scope.row.name }}</template>
        </el-table-column>

        <el-table-column label="旷卡次数" align="center">
          <template slot-scope="scope">{{scope.row.unClockNum}}</template>
        </el-table-column>

      </el-table>
    </div>




  </div>
</template>
<script>

// 导入接口
  import {preClockList,statClockData, listUnClock} from '@/api/login';
  import {formatDate} from '@/utils/date';

  const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    sourceType: 1
  };
  const defaultAdmin = {
    sourceType: 1
  };
  export default {
    name: 'adminList',
    data() {
      return {
        listQuery: Object.assign({}, defaultListQuery),
        list: null,
        xitianList: null,
        affectionList: null,
        westenNoCardList: null,
        total: null,
        listLoading: false,
        dialogVisible: false,
        admin: Object.assign({}, defaultAdmin),
        isEdit: false,
        allocDialogVisible: false,
        allocRoleIds:[],
        allRoleList:[],
        allocAdminId:null,
        clockNum: 0,
        applyNum: 0,
        unClockNum: 0,
        allCount: 0,
        xiTianClockNum: 0,
        xiTianApplyNum: 0,
        xiTiaNunClockNum: 0,
        xiTianAllCount: 0
      }
    },
    created() {
      this.getList();
      this.statData();
      this.xiTianStatData();
      this.xiTianGetList();
      this.qureyAffectionList();
      this.qureyWestenNoCardList();
    },
    filters: {
      formatDateTime(time) {
        if (time == null || time === '') {
          return 'N/A';
        }
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      }
    },
    methods: {
      handleResetSearch() {
        this.listQuery = Object.assign({}, defaultListQuery);
      },
      handleSearchList() {
        this.listQuery.pageNum = 1;
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.getList();
      },
      handleAdd() {
        this.dialogVisible = true;
        this.isEdit = false;
        this.admin = Object.assign({},defaultAdmin);
      },
      handleStatusChange(index, row) {
        this.$confirm('是否要修改该状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateStatus(row.id, {status: row.status}).then(response => {
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消修改'
          });
          this.getList();
        });
      },
      handleDialogConfirm() {
        this.$confirm('是否要确认?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.isEdit) {
            updateAdmin(this.admin.id,this.admin).then(response => {
              this.$message({
                message: '修改成功！',
                type: 'success'
              });
              this.dialogVisible =false;
              this.getList();
            })
          } else {
            createAdmin(this.admin).then(response => {
              this.$message({
                message: '添加成功！',
                type: 'success'
              });
              this.dialogVisible =false;
              this.getList();
            })
          }
        })
      },

      getList() {
        this.listLoading = true;
        preClockList({
          sourceType: 1
        }).then(response => {
          this.listLoading = false;
          this.list = response.data;
          this.total = response.data.total;
        });
      },

      statData() {
        statClockData({
          sourceType: 1
        }).then(response => {
          this.clockNum = response.data.clockNum;
          this.applyNum = response.data.applyNum;
          this.unClockNum = response.data.unClockNum;
          this.allCount = response.data.allCount;
        });
      },


      xiTianGetList() {
        this.listLoading = true;
        preClockList({
          sourceType: 2
        }).then(response => {
          this.listLoading = false;
          this.xitianList = response.data;
        });
      },

      xiTianStatData() {
        statClockData({
          sourceType: 2
        }).then(response => {
          this.xiTianClockNum = response.data.clockNum;
          this.xiTianApplyNum = response.data.applyNum;
          this.xiTiaNunClockNum = response.data.unClockNum;
          this.xiTianAllCount = response.data.allCount;
        });
      },




      qureyAffectionList() {
        this.listLoading = true;
        listUnClock(1).then(response => {
          this.listLoading = false;
          this.affectionList = response.data;
        });
      },

      qureyWestenNoCardList() {
        this.listLoading = true;
        listUnClock(2).then(response => {
          this.listLoading = false;
          this.westenNoCardList = response.data;
        });
      },


 
    }
  }
</script>
<style>
  .total-layout {
    margin-top: 20px;
  }
  
  .total-frame {
    border: 1px solid #DCDFE6;
    padding: 20px;
    height: 100px;
  }
  .total-icon {
    color: #409EFF;
    width: 60px;
    height: 60px;
  }

  .total-title {
    position: relative;
    font-size: 16px;
    color: #909399;
    left: 70px;
    top: -50px;
  }

  .total-value {
    position: relative;
    font-size: 18px;
    color: #606266;
    left: 70px;
    top: -40px;
  }

  .app-container {
    margin-top: 1px;
    margin-left: 120px;
    margin-right: 120px;
  }

  .address-layout {
  }

  .total-layout {
    margin-top: 20px;
  }

  .total-frame {
    border: 1px solid #DCDFE6;
    padding: 20px;
    height: 100px;
  }

  .total-icon {
    color: #409EFF;
    width: 60px;
    height: 60px;
  }

  .total-title {
    position: relative;
    font-size: 16px;
    color: #909399;
    left: 70px;
    top: -50px;
  }

  .total-value {
    position: relative;
    font-size: 18px;
    color: #606266;
    left: 70px;
    top: -40px;
  }

  .un-handle-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
  }

  .layout-title {
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
  }

  .un-handle-content {
    padding: 20px 40px;
  }

  .un-handle-item {
    border-bottom: 1px solid #EBEEF5;
    padding: 10px;
  }

  .overview-layout {
    margin-top: 20px;
  }

  .overview-item-value {
    font-size: 24px;
    text-align: center;
  }

  .overview-item-title {
    margin-top: 10px;
    text-align: center;
  }

  .out-border {
    border: 1px solid #DCDFE6;
  }

  .statistics-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
  }
  .mine-layout {
    position: absolute;
    right: 140px;
    top: 107px;
    width: 250px;
    height: 235px;
  }
  .address-content{
    padding: 20px;
    font-size: 18px
  }
</style>


